<template>
  <a-form
    layout="inline"
    style="margin-bottom: 15px;"
  >
    <a-form-item>
      <!-- <a-button type="primary" @click="search()" style="margin-right: 15px;">查询</a-button> -->
      <a-button type="primary" @click="classfiyChange(formState,'add')">添加分类</a-button>
    </a-form-item>
  </a-form>
  <a-table :columns="columns" :loading="loading" :data-source="dataSource" :row-selection="rowSelection">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'operation'">
        <a-popconfirm
          v-if="dataSource.length"
          title="确定删除?"
          @confirm="onDelete(record._id)"
        >
          <a>删除</a>
        </a-popconfirm>
        <a style="margin-left: 10px;" @click="classfiyChange(record,'edit')">编辑</a>
        <a style="margin-left: 10px;" @click="queryDetail(record._id)">详情</a>
      </template>
    </template>
  </a-table>

  <a-modal v-model:open="open" width="600px" title="添加文章" ok-text="确认" cancel-text="取消" @ok="hideModal">
    <a-form :model="formState" name="basic" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" autocomplete="off">
      <a-form-item  label="导航名称" name="roleName" :rules="[{ required: true, message: '请输入文章标题' }]">
        <a-input v-model:value="formState.title" />
      </a-form-item>
      <a-form-item  label="导航路径" name="roleName" :rules="[{ required: true, message: '请输入文章标题' }]">
        <a-input v-model:value="formState.path" />
      </a-form-item>
      <a-form-item label="是否启动" name="original">
        <a-radio-group v-model:value="formState['status']">
          <a-radio :value="0">否</a-radio>
          <a-radio :value="1">是</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item  label="顺序" name="order" :rules="[{ required: true, message: '请输入文章标题' }]">
        <a-input v-model:value="formState.order" />
      </a-form-item>
      <!-- <a-form-item label="类型" name="type" :rules="[{ required: true, message: '请选择类型' }]">
        <a-select v-model:value="formState.navType" placeholder="请选择类型">
          <a-select-option value="1">HTML</a-select-option>
          <a-select-option value="2">CSS</a-select-option>
          <a-select-option value="3">Js</a-select-option>
        </a-select>
      </a-form-item> -->
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive, ref, Ref } from 'vue';
import *as NavInfo from '../../../assets/api/nav'
import { message } from 'ant-design-vue';
const columns = [
  {title: '导航名称', dataIndex: 'title', align:"center" },
  {title: '路径',dataIndex: 'path', align:"center", },
  // {title: '标签',dataIndex: 'navType', align:"center"},
  {title: '状态',dataIndex: 'status', align:"center"},
  {title: '操作',dataIndex: 'operation', width: '30%', align:"center"},
];
interface DataItem {
  title: string;
  path: string;
  navType?: number;
  status: string | number;
  order: string | number;
  children?: DataItem[];
};

let loading = ref(false);
let open = ref<boolean>(false);
let changeType = ref<string>('add');
const dataSource: Ref<DataItem[]> = ref([]);
interface fromData {
  title: string;
  path: string;
  navType?: number;
  status: number | string;
  order: string | number;
  _id?: string;
  id?: string;
}

const formState = reactive<fromData>({
  title: '',
  path: '',
  navType: 0,
  status: 1,
  order: 0,
  id: ''
})

const classfiyChange = (data: fromData, str: string) => {
  if(changeType.value === 'add'){
    formState.title = ''
    formState.path = ''
    formState.navType = 0
    formState.status = 1
  }else{
    formState.title = data.title
    formState.path = data.path
    formState.navType = data.navType
    formState.status = data.status
    formState.id = data._id
  }
  open.value = true
  changeType.value = str
}

// 获取导航列表
const getList = () =>{
  loading.value = true
  let params = {
    page: 1,
    pageSize: 10,
  }
  NavInfo.queryNavList(params).then(res =>{
    if(res.code === 200){
      loading.value = false
      dataSource.value = res.data?.list
    }
  })
}
getList()


const hideModal = () => {
  let params:fromData = {
    title: formState.title,
    path: formState.path,
    status: formState.status,
    order: formState.order,
  }
  if(changeType.value === 'edit'){
    params.id = formState.id
    NavInfo.editNav(params).then(res => {
      if(res.code === 200){
        message.success(res.msg)
        getList()
      }
    })
  }else{
    if(!formState.title){
      return message.warning('角色名称不能为空')
    }
    if(!formState.path){
      return message.warning('路径不能为空')
    }
    NavInfo.addNav(params).then(res => {
      if(res.code === 200){
        message.success(res.msg)
        getList()
      }
    })
  }
  open.value = false
}

// 查询详情
const queryDetail = (id: string) => {
  NavInfo.queryNavDetail(id).then(res => {
    if(res.code === 200){
      
    }
  })
}

// 删除角色
const onDelete = (key: string) => {
  NavInfo.deleteNav(key).then(res => {
    if(res.code === 200){
      message.success(res.msg)
      getList()
    }
  })

};

const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
    console.log(selected, selectedRows, changeRows);
  },
});
</script>

<style lang="scss" scoped>

</style>
